import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Form, Button, Tree } from 'antd';
import DrawerCondition from '@/components/DrawerCondition';

const SysMenuSet = (props) => {
  const { dispatch, visible = {}, onClose, handleCallback, loading } = props;
  const [data, setData] = useState([]);
  const { show = false, detail = {} } = visible;
  const { allAccessList = [], roleAccessList = [], roleId } = detail;
  const [form] = Form.useForm();
  // 新增修改 传id修改 不传id新增
  const fetchRole = () => {
    dispatch({
      type: 'setting/fakeRoleAccess',
      payload: {
        accessIdList: data,
        roleId,
      },
      callback: () => {
        onClose();
      },
    });
  };
  const modalProps = {
    title: `资源设置`,
    visible: show,
    onClose,
    footer: (
      <Button type="primary" loading={loading} onClick={fetchRole}>
        确定
      </Button>
    ),
  };
  console.log(
    allAccessList,
    roleAccessList.map((item) => {
      return item.id;
    }),
  );
  return (
    <DrawerCondition {...modalProps}>
      <Tree
        checkable
        autoExpandParent
        defaultCheckedKeys={roleAccessList
          .filter((item) => {
            return item.id !== 0;
          })
          .map((item) => {
            return item.id;
          })}
        defaultExpandAll={roleAccessList
          .filter((item) => {
            return item.id !== 0;
          })
          .map((item) => {
            return item.id;
          })}
        treeData={allAccessList}
        onCheck={(e, i) => {
          const { halfCheckedKeys } = i;

          setData([...e, ...halfCheckedKeys]);
        }}
        // onCheck={onCheck}
        // treeData={treeData}
      />
    </DrawerCondition>
  );
};

export default connect(({ setting, loading }) => ({
  allMenu: setting.allMenu,
  loading: loading.effects['setting/fakeAuthRole'],
}))(SysMenuSet);
